<template>
  <div>
    <!-- 面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 警示区域 -->
      <el-alert show-icon center title="添加商品信息" type="info" :closable="false"> </el-alert>
      <!-- 步骤条 -->
      <el-steps :space="200" :active="currentActiveStepsOrtab - 0" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品照片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- form表单验证区域(el-form与el-form-item可以不连在一起) -->
      <el-form label-position="top" :model="addGoodsRuleForm" :rules="addGoodsRuleFormRules" ref="addGoodsRuleFormRef" label-width="80px">
        <!-- tab栏标签处(el-tabs与el-tab-pane标签必须是连在一起的) -->
        <el-tabs tab-position="left" v-model="currentActiveStepsOrtab" :before-leave="beforeTabLeave" @tab-click="tabClicked">
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="addGoodsRuleForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="addGoodsRuleForm.goods_price" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="addGoodsRuleForm.goods_weight" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="addGoodsRuleForm.goods_number" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="cat_name">
              <el-cascader v-model="addGoodsRuleForm.goods_cat" :options="cateList" :props="props" @change="handleChange"></el-cascader>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="1">
            <el-form-item v-for="item in manyParamsList" :key="item.attr_id" :label="item.attr_name">
              <el-checkbox-group v-model="item.attr_vals">
                <!-- label与数组中的元素值相对应, 如果存在指定的值则为选中状态，
                否则为不选中,故我修改为不选中,对应的item.attr_vals中的该值将被移除 -->
                <el-checkbox v-for="(cb, i) in item.attr_vals" :key="i" :label="cb" border></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2">
            <el-form-item v-for="item in onlyAttrList" :key="item.attr_id" :label="item.attr_name">
              <el-input v-model="item.attr_vals"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品照片" name="3">
            <!-- action: 上传图片到哪里?? -->
            <!-- fileList: 保存着上传图片的名字与url -->
            <!-- on-preview: 点击文件列表中已上传的文件时的钩子 -->
            <!-- on-remove: 移除图片时触发 -->
            <!-- list-type: 上传的图片以什么形式显示(这里用的是缩略图) -->
            <!-- multiple: 是否支持多选文件 -->
            <!-- drag: 支持拖拽 -->
            <!-- headers: 设置上传的请求头部 -->
            <el-upload class="upload-demo" :on-success="successUpdate" :headers="setAskHeader" drag action="http://127.0.0.1:8888/api/private/v1/upload/" multiple :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <!-- 富文本编辑器 -->
            <quill-editor v-model="addGoodsRuleForm.goods_introduce"> </quill-editor>
            <el-button type="primary" @click="addgood">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
    <el-dialog title="预览图片" :visible.sync="goodsPicDialog" width="50%">
      <img :src="addGoodPic" alt="" class="addGoodPic" />
    </el-dialog>
  </div>
</template>

<script>
import commonAPI from '@/api/commonAPI/commonAPI.js'
export default {
  data() {
    /*
    其中rule: 是当前自定义规则所对应的规则对象.
    value是要验证的字段的值，cb是验证以后的回调函数
    如果值可以通过正则校验，就return cb()
    否则调用cb并且传入一个错误对象实例
    */
    const commonRule = (rule, value, cb) => {
      let str = ''
      if (rule.field.indexOf('price') !== -1) {
        str = '价格'
      } else if (rule.field.indexOf('weight') !== -1) {
        str = '重量'
      } else {
        str = '数量'
      }
      if (!value) {
        cb(new Error(`请输入商品价格${str}`))
      } else {
        value > 0 ? cb() : cb(new Error(`商品${str}必须大于0`))
      }
    }
    const minPri = commonRule
    const minWei = commonRule
    const minNum = commonRule
    return {
      // 步骤条默认选中第一项基本信息和tabs区域的联动效果数据(索引)
      currentActiveStepsOrtab: '0',
      // 控制添加用户对话框的显示与隐藏
      goodsDialog: false,
      // 表单验证数据对象
      addGoodsRuleForm: {
        goods_name: '',
        goods_price: null,
        goods_weight: null,
        goods_number: null,
        // 商品所属的分类数组(存储选中的一二三级商品分类信息(由于我在配置对象中设置了绑定的是id值))
        goods_cat: [],
        // 存放上传图片成功后的图片在服务器上的临时地址
        pic: [],
        /* 要添加的商品的介绍 */
        goods_introduce: '',
        /* 商品的参数（数组），包含 `动态参数` 和 `静态属性`/ 可以为空 */
        attrs: []
      },
      // 表单验证数据的规则对象
      addGoodsRuleFormRules: {
        goods_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        goods_price: [{ required: true, validator: minPri, trigger: 'blur' }],
        goods_weight: [{ required: true, validator: minWei, trigger: 'blur' }],
        goods_number: [{ required: true, validator: minNum, trigger: 'blur' }],
        goods_cat: [{ required: true, message: '请选择商品分类', trigger: 'blur' }]
      },
      // 商品分类数据
      cateList: [],
      // 级联选择器的配置对象
      props: {
        expandTrigger: 'hover',
        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
      },
      // 动态参数列表
      manyParamsList: [],
      // 静态属性列表
      onlyAttrList: [],
      // 区分请求的是动态参数还是静态属性
      info: '',
      // fileList: 保存着上传图片的名字与本地服务器url
      fileList: [],
      // 设置上传的请求头部
      setAskHeader: {
        Authorization: window.sessionStorage.getItem('token')
      },
      goodsPicDialog: false, // 控制预览图片显示框是否显示
      addGoodPic: '' // 预览图片的相对路径
    }
  },
  created() {
    this.getAllgoodsCate()
  },
  computed: {
    cateId() {
      if (this.addGoodsRuleForm.goods_cat.length === 3) {
        return this.addGoodsRuleForm.goods_cat[2]
      }
      return null
    }
  },
  methods: {
    async getAllgoodsCate() {
      const { data: res } = await commonAPI({ method: 'get', url: 'categories' })
      if (res.meta.status !== 200) return this.$message.error('请求商品分类数据失败!')
      this.$message.success('请求商品分类数据成功!')
      this.cateList = res.data
    },
    // 当级联选择器的选项发生改变时触发
    handleChange() {
      if (this.addGoodsRuleForm.goods_cat.length !== 3) {
        this.addGoodsRuleForm.goods_cat = []
      }
    },
    // 当发生标签页的切换时触发
    beforeTabLeave(activeTabName, oldActiveTabName) {
      // console.log('即将离开的标签页:', oldActiveTabName)
      // console.log('即将进入的标签页:', activeTabName)
      if (this.addGoodsRuleForm.goods_cat.length !== 3) {
        // 如果选择的是三级分类就不可以跳转
        this.$message.error('请选择商品分类!')
        return false
      }
    },
    // 请求分类参数或属性的方法
    async getParamsAttr(sel) {
      if (sel === 'many') {
        this.info = '动态参数'
      } else {
        this.info = '静态属性'
      }
      const { data: res } = await commonAPI({ method: 'get', url: `categories/${this.cateId}/attributes`, params: { sel: sel } })
      if (res.meta.status !== 200) return this.$message.error(`请求${this.info}失败!`)
      this.$message.success(`请求${this.info}成功!`)
      if (sel === 'many') {
        res.data.forEach(item => {
          item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
        })
        this.manyParamsList = res.data
      } else {
        this.onlyAttrList = res.data
        console.log(this.onlyAttrList)
      }
    },
    // 当点击tab时触发
    tabClicked() {
      // name = '2' 可以跳转则获取动态参数的数据
      if (this.currentActiveStepsOrtab === '1') {
        // console.log(this.currentActiveStepsOrtab)
        this.getParamsAttr('many')
      } else if (this.currentActiveStepsOrtab === '2') {
        this.getParamsAttr('only')
      }
    },
    // on-preview 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      this.goodsPicDialog = true
      this.addGoodPic = file.response.data.url
    },
    // 移除上传图片时触发
    handleRemove(file) {
      // console.log(file) // 要删除的图片的信息
      const delectPic = file.response.data.tmp_path
      /*
      1.找到在this.addGoodsRuleForm上的图片在服务器中的临时地址
      2.查找要删除的文件在服务器中的临时地址,在this.addGoodsRuleForm上的pic的索引
       */
      const index = this.addGoodsRuleForm.pic.findIndex(item => {
        return item.pic === delectPic
      })
      this.addGoodsRuleForm.pic.splice(index, 1)
    },
    // 当成功上传时触发
    successUpdate(response) {
      // console.log(response) 上传到服务器后返回的成功的数据
      // 其中 response中的 data中的 tmp_path: 是存放在服务器中的临时路径(绝对路径),url是真实路径(相对路径)
      const tempUrl = { pic: response.data.tmp_path }
      // 每成功上传一个图片,就追加一个
      this.addGoodsRuleForm.pic.push(tempUrl)
    },
    // 点击添加商品按钮时触发
    addgood() {
      // 进行表单预验证
      this.$refs.addGoodsRuleFormRef.validate(async valid => {
        if (!valid) return // this.$message.error('请填写必要的表单项')
        // 通过了预验证就的发起添加商品的请求了
        const closeAddGoodsRuleForm = { ...this.addGoodsRuleForm }
        closeAddGoodsRuleForm.goods_cat = closeAddGoodsRuleForm.goods_cat.join(',')
        this.manyParamsList.forEach(item => {
          closeAddGoodsRuleForm.attrs.push(item.attr_vals.join(' '))
        })
        this.onlyAttrList.forEach(item => {
          closeAddGoodsRuleForm.attrs.push(item.attr_vals)
        })
        const { data: res } = await commonAPI({ method: 'post', url: 'goods', params: closeAddGoodsRuleForm })
        if (res.meta.msg === '商品名称已存在') return this.$message.error('该商品名称已存在!')
        if (res.meta.status !== 201) return this.$message.error('添加商品失败!')
        this.$message.success('添加商品成功!')
        this.$router.push('/goods')
      })
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-steps {
  margin: 20px 0;
}
::v-deep .el-step__title {
  font-size: 14px;
}
::v-deep .el-tabs__item:hover {
  color: #67c23a;
}
::v-deep .el-checkbox {
  margin: 0 10px 0 0;
}
::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin: 0 10px 0 0;
}
::v-deep .el-upload-dragger .el-icon-upload {
  font-size: 34px;
  color: #c0c4cc;
  margin: 35px 0 24px;
  line-height: 0;
}
::v-deep .el-upload-dragger {
  width: 200px;
  height: 100px;
}
.addGoodPic {
  width: 100%;
}
.el-button {
  margin-top: 20px;
}
</style>
